<template>
  <el-dropdown trigger="click" @command="handleCommand">
    <span class="el-dropdown-link">
      <i class="iconfont icon-diandiandian" @click="updatedData"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-tooltip
        effect="dark"
        :content="$t('im.imChat.components.messageBox.moreEdit.tips1')"
        placement="top-start"
        :disabled="!withdrawDisabled"
      >
        <div v-if="item.sendType == 1">
          <el-dropdown-item :disabled="withdrawDisabled" command="withdraw"
            >{{$t('common.base.withdraw')}}</el-dropdown-item
          >
        </div>
      </el-tooltip>
      <!-- <el-tooltip
        effect="dark"
        content="该类型不支持复制"
        placement="top-start"
        :disabled="!copyDisabled"
      >
        <div>
          <el-dropdown-item :disabled="copyDisabled" command="copy"
            >复制</el-dropdown-item
          >
        </div>
      </el-tooltip> -->
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
/** api */
import { customerServiceMessageRecall } from 'src/api/ImApi.js';
/** vue */
import EventBus from '@src/util/eventBus';
/** util */
import moment from 'moment';
import { setClipboardData } from '@src/util/dom';

export default {
  name: 'more-edit',
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    idx: {
      type: Number,
    },
  },
  data() {
    return {
      withdrawDisabled: false,
      maxTime: 2, //最大撤回时间 分钟
    };
  },
  computed: {
    messageType() {
      return this.item.messageType;
    },
    copyDisabled() {
      return !['txt'].includes(this.messageType);
    },
  },
  methods: {
    handleCommand(val) {
      if (val == 'withdraw') {
        this.withdrawCB();
      } else if (val == 'copy') {
        this.copyCb();
      }
    },
    //撤回消息
    async withdrawCB() {
      try {
        let { conversationId, id } = this.item;
        const { code, data, message } = await customerServiceMessageRecall({
          conversationId,
          id,
        });
        if (code == 0) {
          EventBus.$emit('updatedMsgList', {
            type: 'withdraw',
            idx: this.idx,
            msgInfo: data,
          });
        } else {
          this.$message.error(message);
        }
      } catch (err) {
        this.$message.error(this.$t('common.base.tip.withdrawFail'));
      }
    },
    copyCb() {
      let msg = '';
      if (this.messageType == 'txt') {
        msg = this.item?.messageContent?.msg ?? '';
      } else if (this.messageType == 'paragraph') {
        msg = this.item?.messageContent?.customExts?.msg ?? '';
      }
      setClipboardData(
        msg,
        () => {
          // 复制成功
        },
        () => {
          // 复制失败
        }
      );
    },
    updatedData() {
      let { createTime } = this.item;
      createTime = moment(createTime).valueOf();
      let nowTime = moment().valueOf();
      if (nowTime - createTime > this.maxTime * 60000) {
        this.withdrawDisabled = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.icon-diandiandian {
  cursor: pointer;
  position: relative;
  top: 4px;
}
</style>